<template>
  <a-modal :visible="visible" :ok-loading="loading" @ok="handleOk" @cancel="handleCancel">
    <template #title>
      {{ title }}
    </template>

    <a-form ref="form" :model="form" auto-label-width>
      <a-form-item
          field="title"
          label="标题"
          :disabled="disabled"
          :rules="[{required: true,message:'标题不能为空'}]"
          :validate-trigger="['blur']"
      >
        <a-input v-model="form.title" placeholder="请输入标题"/>
      </a-form-item>
      <a-form-item
          field="code"
          label="编码"
          :disabled="disabled"
          :rules="[{required: true,message:'编码不能为空'}]"
          :validate-trigger="['blur']"
      >
        <a-input v-model="form.code" placeholder="请输入编码"/>
      </a-form-item>
      <a-form-item field="interval" label="切换间隔(ms)" :disabled="disabled">
        <a-input-number v-model="form.interval" placeholder="5000" :min="1000" :max="10000" :step="100"/>
      </a-form-item>
      <a-form-item field="duration" label="动画时长(ms)" :disabled="disabled">
        <a-input-number v-model="form.duration" placeholder="500" :min="10" :max="1000" :step="10"/>
      </a-form-item>
      <a-form-item field="enabled" label="启用" :disabled="disabled">
        <a-switch
          v-model="form.enabled"
          type="round"
          unchecked-color="#F53F3F"
          :checked-value="true"
          :unchecked-value="false"
        >
          <template #checked>
            启用
          </template>
          <template #unchecked>
            禁用
          </template>
        </a-switch>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import {getById, save} from "@/api/modules/marketing/carousel";
import useLoading from "@/hooks/loading";

const { loading, setLoading } = useLoading()

export default {
  name: 'CarouselBoard',
  emits: ['ok', 'cancel'],
  data() {
    return {
      id: '',
      title: '',
      visible: false,
      disabled: false,
      form: {
        enabled: true
      },
      loading
    }
  },
  methods: {
    async open(id, title, disabled) {
      this.id = id
      if (id) {
        const { data } = await getById(id)
        this.form = data
      }
      this.title = title
      this.disabled = disabled
      this.visible = true
    },
    close() {
      this.visible = false
      this.id = ''
      this.title = ''
      this.disabled = false
      this.form = {
        enabled: true
      }
      this.$refs.form.resetFields()
    },
    handleOk() {
      if (!this.disabled) {
        this.$refs.form.validate(async (errors) => {
          if (!errors) {
            try {
              setLoading(true)
              await save(this.form)
              this.$emit('ok')
              this.close()
            } finally {
              setLoading(false)
            }
          }
        })
      } else {
        this.close()
      }

    },
    handleCancel() {
      this.close()
    }
  }
}

</script>

<style scoped lang="less">

</style>
